import React, {Component, PropTypes} from 'react';
import ReactCSSTransitionGroup from 'react-addons-css-transition-group'
import {observer} from 'mobx-react'
import DevTool from 'mobx-react-devtools';
import './styles/App.css';
import Search from './components/Search'
import PlayBar from './components/PlayBar'
import Play from './components/Play'
import Rank from './components/Rank'
@observer
class App extends Component {

  constructor(props) {
    super(props)
    this.showPlayPage = this.showPlayPage.bind(this)
    this.showRank = this.showRank.bind(this)
    this.state = {
      playPageShow: false,
      rankShow: true
    }
  }

  showPlayPage() {
    this.setState({
      playPageShow: !this.state.playPageShow
    })
  }

  showRank(rankshow) {
    this.setState({
      rankShow: rankshow
    })
  }

  render() {

    const {musicStore} = this.props;

    return (
      <div id="app">
        <DevTool />
        <Search musicStore={musicStore} showRank={this.showRank}/>
        {
          (this.state.rankShow && !this.state.playPageShow) && <Rank/>
        }

        <ReactCSSTransitionGroup
          transitionName="play"
          transitionEnterTimeout={300}
          transitionLeaveTimeout={300}
        >
          {this.state.playPageShow &&
          <Play musicStore={musicStore} showPlayPage={this.showPlayPage}/>}
        </ReactCSSTransitionGroup>
        <PlayBar musicStore={musicStore} showPlayPage={this.showPlayPage}
                 playPageShow={this.state.playPageShow}/>
      </div>
    );
  }
}

App.propTypes = {
  musicStore: PropTypes.object.isRequired
}

export default App;
